<template>
  <a-empty v-if="showEmpty" :image="simpleImage" style="margin-top: 100px" />
  <div v-else :id="id"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { Chart } from '@antv/g2';
import { Empty } from 'ant-design-vue';
export default defineComponent({
  name: 'LineChart',
  props: {
    id: {
      type: String,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    tipText: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const initLineChart = (data) => {
      const chart = new Chart({
        container: props.id,
        autoFit: true,
        height: 240
      });
      chart.data(data);
      // if ((props.data[0] as any).monitorUnit == '%') {
      //   chart.axis('monitorValue', {
      //     label: {
      //       formatter: (val) => {
      //         return val + ' %';
      //       }
      //     }
      //   });
      //   chart.scale({
      //     monitorTime: {
      //       range: [0, 1]
      //     },
      //     monitorValue: {
      //       min: 0,
      //       max: 100,
      //       nice: true
      //     }
      //   });
      // } else {
      chart.scale({
        monitorTime: {
          range: [0, 1]
        },
        monitorValue: {
          min: 0,
          nice: true
        }
      });
      // }
      chart
        .area()
        .position('monitorTime*monitorValue')
        .color('lineType', (type) => {
          if (type == 'avg') {
            return 'l(90) 0:#2F87F3 1:#f7f7f7';
          } else if (type == 'max') {
            return 'l(90) 0:#ff7875 1:#f7f7f7';
          } else {
            return 'l(90) 0:#abcdef 1:#f7f7f7';
          }
        })
        .tooltip(false);
      chart
        .line()
        .position('monitorTime*monitorValue')
        .color('lineType', (type) => {
          if (type == 'avg') {
            return '#2F87F3';
          } else if (type == 'max') {
            return '#ff7875';
          } else {
            return '#abcdef';
          }
        });
      chart.tooltip({
        showCrosshairs: true,
        shared: true
      });
      chart.interaction('element-highlight');
      chart.render();
    };
    const showEmpty = ref(false);
    onMounted(() => {
      showEmpty.value = props.data.length <= 0;
      props.data.length && initLineChart(props.data);
    });
    return {
      initLineChart,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      showEmpty
    };
  }
});
</script>

<style scoped lang="less"></style>
